<template>
    <div class="footerBox">
        <div class="item">
            <div class="food">
                <span>各类品占比</span>
                <a>更多</a>
            </div>
            <div class="foodPicture">
                <div class="fp">
                    <el-progress type="circle"
                                 :format="format"
                                 :percentage="99"
                                 :stroke-width=18
                                 stroke-linecap="butt">

                    </el-progress>
                </div>
                <div class="fp">
                    <el-progress type="circle"
                                 :percentage="22"
                                 :stroke-width=18
                                 stroke-linecap="butt"
                                 color="#5fd690">

                    </el-progress>
                </div>
                <div class="fp">
                    <el-progress type="circle"
                                 :percentage="32"
                                 :stroke-width=18
                                 stroke-linecap="butt"
                                 color="#ff8d1a">

                    </el-progress>
                </div>
            </div>
        </div>
        <div class="item">
            <span>热门搜索</span>
            <div class="popular">

            </div>
        </div>
        <div class="item">
            <span>资源剩余</span>
            <div class="resource" id="resource"></div>
        </div>
    </div>
</template>

<script>
    import {Liquid} from "@antv/g2plot";

    export default {
        name: "tradeFooter",
        data() {
            return {}
        },
        created() {
        },

        methods: {



        },

        mounted() {
            const liquidPlot = new Liquid('resource', {
                percent: 0.25,
                outline: {
                    border: 4,
                    distance: 8,
                },
                wave: {
                    length: 128,
                },
            });
            liquidPlot.render();
        }

    }
</script>

<style scoped>
    .footerBox {
        display: flex;
    }
    .footerBox .item {
        background: #ffffff;
        margin-top: 25px;

    }
    .footerBox .item:first-child {
        flex: 2;
        height: 300px;
    }
    .footerBox .item:first-child .food {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        height: 50px;
        border-bottom: 1px solid #aaa8a8;
    }
    .footerBox .item:first-child .food a {
        color: #42a4ff;
    }
    .footerBox .item:first-child .foodPicture{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .footerBox .item:first-child .foodPicture .fp {
        width: 80%;
        height: 250px;
        padding-top: 60px;
    }
    .footerBox .item:nth-child(2) {
        width: 300px;
        height: 300px;
        margin: 25px;
    }
    .footerBox .item:last-child {
        width: 300px;
        height: 300px;
    }
    .footerBox .item:nth-child(2) span,
    .footerBox .item:nth-child(3) span {
        display: block;
        text-align: left;
        padding: 15px;
        border-bottom: 1px solid #aaa8a8;
    }
    .footerBox .item:nth-child(3) .resource{
        width: 300px;
        height: 250px;
    }
</style>
